<template>
	<view class="home-item-container" :selectable="false" @click="this.$emit('click')">
		<view class="item-header-container">
			<u-avatar :src="avater" size="mini"></u-avatar>
			<view class="info">
				<view class="user u-flex">
					<view class="user-name">{{userName}}</view>
					<view class="sex-icon">
						<template v-if="sex === 'woman'">
							<u-image :src="woman" width="20px" height="20px"></u-image>
						</template>
						<template v-else-if="sex === 'man'">
							<u-image :src="man" width="20px" height="20px"></u-image>
						</template>
					</view>
				</view>
				<view class="other u-flex u-row-between">
					<view class="date">{{postDate}}</view>
					<view class="school">{{school}}</view>
				</view>
			</view>
		</view>
		<view class="item-content-container">
			<view class="task-head u-flex u-row-between">
				<view class="title">
					{{title}}
				</view>
				<view class="price">
					{{price}}元
				</view>
			</view>
			<view class="task-content">

				<view class="from-place u-flex">
					<u-image src="../../static/carry-inner-icon/home-item/to_bule.png" height="18px" width="18px"></u-image>
					<view class="title">取件地点</view>
					<view class="content">{{fromPlace}}</view>
				</view>
				<view class="to-place u-flex">
					<u-image src="../../static/carry-inner-icon/home-item/to_red.png" height="18px" width="18px"></u-image>
					<view class="title">送达地点</view>
					<view class="content">{{toPlace}}</view>
				</view>


			</view>
		</view>
		<template v-if="status==='已接单'">
			<view :style="{backgroundColor: bindStyle.status_received.backgroundColor}" class="right-status">{{status}}</view>
		</template>
		<template v-else-if="status==='待接单'">
			<view :style="{backgroundColor: bindStyle.status_unReceived.backgroundColor}" class="right-status">{{status}}</view>
		</template>
		<template v-else-if="status==='已完成'">
			<view :style="{backgroundColor: bindStyle.status_finshed.backgroundColor}" class="right-status">{{status}}</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 作者: 臧锡洋
	 * 2020年11月18日 20:28:51
	 * 大厅item组件
	 */
	export default {
		props: {
			userName: String,
			avater: {
				type: String,
				require: false,
				default: () => {
					return require('../../static/carry-inner-icon/my_no_login_icon.png')
				}
			},
			postDate: {
				type: String,
				default: '一分钟前'
			},
			school: {
				type: String,
				default: '暂未填写'
			},
			sex: {
				type: String,
				default: 'man'
			},
			status: {
				/* 任务状态
				 * 已接单/待接单/已完成
				 */
				type: String,
				require: true
			},
			price:{
				require: true
			},
			title:{
				type: String,
				require: true
			},
			fromPlace:{
				type: String,
				require: true
			},
			toPlace:{
				type:String,
				require: true
			}
		},
		data() {
			return {
				/**
				 * man和woman icon 对应的路径
				 */
				man: require('../../static/carry-inner-icon/home-item/icon_sex_man.png'),
				woman: require('../../static/carry-inner-icon/home-item/icon_sex_woman.png'),
				/**
				 * 绑定的style样式
				 */
				bindStyle: {
					// 已接单
					status_received: {
						backgroundColor: '#2B85E4'
					},
					// 未接单
					status_unReceived: {
						backgroundColor: '#5555ff'
					},
					// 已完成
					status_finshed: {
						backgroundColor: '#81c200'
					}
				}
			};
		},
		methods:{
			onClick(){
				console.log("home-item被点击")
			}
		}
	}
</script>

<style lang="scss">
	.home-item-container {
		position: relative;
		box-sizing: border-box;
		margin: 10rpx 40rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		border: 1px solid #ebebeb;
		/* 每一个都需要item间隔 */
		margin-bottom: 25rpx !important;

		/* item头部 */
		.item-header-container {
			display: flex;

			.info {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-left: 20rpx;

				.user {
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 600;
					color: #222;
					font-size: 15px;

					.sex-icon {
						margin-left: 20rpx;
					}
				}

				.other {
					color: #82848A;
					font-size: 12px;
				}
			}
		}

		/* item中部 - 任务card */
		.item-content-container {
			margin: 10rpx 20rpx;
			padding: 20rpx 30rpx;
			padding-top: 0 !important;
			background-color: rgba(255, 240, 208, 0.5);
			border-radius: 5px;

			.task-head {
				padding: 15rpx 0;
				font-size: 18px;
				font-weight: bold;
				border-bottom: 1px solid #f0f0f0;

				.title {
					color: #111;
				}

				.price {
					color: #f50000;
				}
			}

			.task-content {
				padding: 20rpx 0;

				.to-place {
					margin-top: 10rpx;
				}

				.title {
					color: #606266;
					margin-left: 30rpx;
				}

				.content {
					margin-left: 30rpx;
					width: 150px;
				}
			}
		}

		.right-status {
			position: absolute;
			width: 150rpx;
			color: #ECF5FF;
			right: 0;
			top: 0;
			text-align: center;
			padding: 5rpx;
			border-top-right-radius: 5px;
		}
	}
</style>
